import React, {memo, useCallback, useEffect, useState} from 'react';
import {Steps} from 'antd';
import {ProfileWrapper} from "./style";
import {IdcardOutlined, SmileOutlined, TagsOutlined, LockOutlined, DeploymentUnitOutlined} from "@ant-design/icons";
import ProfileBase from "@/components/profile-base";
import ProfileIndividual from "@/components/profile-individual";
import ProfileOpus from "@/components/profile-opus";
import ProfileSecret from "@/components/profile-secret";
import ProfileSocial from "@/components/profile-social";
import {getProfileBase} from "@/network/profile.request";

const {Step} = Steps;

export default memo(function Profile(props) {
  const {userId} = props;
  const [current, setCurrent] = useState(0);
  const [baseProfile, setBaseProfile] = useState({});
  const [user, setUser] = useState({});

  const changeProfile = useCallback(() => {
    getProfileBase(userId).then(res => {
      setBaseProfile(res.baseProfile);
      setUser(res.user);
    }).catch(console.log)
  }, [userId])

  useEffect(() => {
    changeProfile();
  }, [changeProfile])

  const onChange = useCallback(current => {
    setCurrent(current)
  }, [])


  return (
    <ProfileWrapper>
      <Steps
        type="navigation"
        size="small"
        current={current}
        onChange={onChange}
        className="site-navigation-steps"
      >
        <Step status="finish" title="基础信息" icon={<IdcardOutlined/>}/>
        <Step status="finish" title="个人特点" icon={<SmileOutlined/>}/>
        <Step status="finish" title="作品信息" icon={<TagsOutlined/>}/>
        <Step status="finish" title="我的密保" icon={<LockOutlined/>}/>
        <Step status="finish" title="联系方式" icon={<DeploymentUnitOutlined/>}/>
      </Steps>

      <div className="main">
        {
          current === 0 && <ProfileBase baseProfile={baseProfile} user={user}/>
        }
        {
          current === 1 && <ProfileIndividual userId={userId}/>
        }
        {
          current === 2 && <ProfileOpus userId={userId}/>
        }
        {
          current === 3 && <ProfileSecret/>
        }
        {
          current === 4 && <ProfileSocial userId={userId}/>
        }
      </div>
    </ProfileWrapper>
  )
})